
let xhr = null
    let container = document.querySelector("#content")
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest() 
    } else {
        xhr = ActiveXObject("microsoft.XMLHTTP")
    }


    xhr.open('get' , "http://chst.vip:1234/api/getcategorytitle" , true)

    xhr.send(null)

    let res = xhr.responseText

    xhr.onreadystatechange = function () {
       if(xhr.readyState === 4 && xhr.status === 200) {
        let res = JSON.parse(xhr.responseText).result
        console.log(res);

       /*  let { result: data } = res; */

        let html = "";

        res.forEach(item => {
            html += ` 
            <div class="panel">
            <div class="head">
                <h4>
                    <a>
                        <span>${item.title}</span>
                        <i>▼</i>
                    </a>
                </h4>
                
            </div>
            <div class="content1">
            <div class="conten_item">
            <div class="cont">
                <div class="row">
                    
                </div>
            </div>
        </div>
            </div>
            </div>`
        })
            /* console.log(html); */
            container.innerHTML = html
            var content = document.querySelectorAll('.panel .row');
            /* console.log(content); */
            let asd = [...content];
            console.log(asd);
            asd.map((item, index) => {
               /*  console.log(item); */
                /* console.log(index); */
                let xhri = new XMLHttpRequest() 

                xhri.open('get' , "http://chst.vip:1234/api/getcategory?titleid=" + index , true)
            
                xhri.send()

                xhri.onreadystatechange = function () {
                    if(xhri.readyState === 4 && xhri.status === 200) {
                     let ress = JSON.parse(xhri.responseText).result
                     var html1 = "";
                     ress.forEach(item1 => {
                        html1 += `<div class="col">
                        <a href="">${item1.category}</a>
                    </div>`
                    asd[index].innerHTML = html1
                     })
                    }
                }
            })
            let groups = document.querySelectorAll(".content1");
            let drawers = document.querySelector("#content");
            let titles = document.querySelectorAll(".head");
            let myDiv = document.querySelectorAll(".head")
            console.log(myDiv);
            for(let i = 0; i<myDiv.length;i++) {
                myDiv[i].addEventListener('click',function() {
                    var div_s = document.querySelectorAll('.content1') 
                   /*  var div_s= div_s[i]; */
                    // console.log(div_s); 
                    const flag = div_s[i].style.display === "none"
                    for(let j = 0; j < myDiv.length; j++) { 
                        /* div_s[j].style.backgroundColor = 'red' */
                        div_s[j].style.display="none";  
                    }
                   /*  div_s[i].style.backgroundColor = 'pink' */
                   flag && (div_s[i].style.display="block");  
                    
                    
                })
            }
            
       }
    }

    /* if(div_s.style.display=="none"){  
                    
        div_s.style.display="block";  
    }else{  
       
            div_s.style.display="none";  
    } */
    

        
        

//   let myDiv = document.querySelectorAll(".head")
//         console.log(myDiv);
//         for(let i = 0; i<myDiv.length;i++) {
//             myDiv[i].addEventListener('click',function() {
//                 var div_s = document.querySelectorAll('.content1') 
//                /*  var div_s= div_s[i]; */
//                 // console.log(div_s); 
//                 for(let j = 0; j < myDiv.length; j++) { 
//                     /* div_s[j].style.backgroundColor = 'red' */
//                     div_s[j].style.display="none";  
//                 }
//                /*  div_s[i].style.backgroundColor = 'pink' */
//                 /* div_s[i].style.display="block";   */
                
                
//             })
//         }



            // [...groups].forEach(group => {
            //     /* console.log(groups);
            //     group.style.cssText = "display:flex;position:absolute;left:-1000px"
            //     group.dataHeight = group.offsetHeight; 
            //     group.style.cssText = "position:static;height:0;" */
            //     group.style.display="none";  

            // })
            // console.log(titles);
            // /* console.log(drawers); */
            // drawers.onclick = function (e) { 
            //     console.log(drawers);
            //     if (e.target.className = "head") { 
            //         let _this = e.target;
            //         let group = _this.nextElementSibling;
            //         if (group.style.display="none") { 
            //             /* [...groups].forEach(group => {
            //                 group.style.height = 0;
            //             })
            //             group.style.transition = "all .2s" */
            //             group.style.display="block";  
            //         } else {
            //            /*  group.style.transition = "all .2s" */
            //             /* group.style.height = 0 */
            //             group.style.display="none";  
            //         }
            //     }
            // }
    